<template>
  <baidu-map class="map" center="长沙" :scroll-wheel-zoom="true">
    <bm-polygon
      :path="polygonPath"
      stroke-color="blue"
      :stroke-opacity="0.5"
      :stroke-weight="2"
      :editing="false"
      @lineupdate="updatePolygonPath"
    />
    <!--自定义控件-->
    <bm-control anchor="BMAP_ANCHOR_TOP_LEFT">
      <el-button type="primary" @click="addPolylinePoint()">添加节点</el-button>
    </bm-control>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      polygonPath: [
        { lng: 112.920389, lat: 28.21382 },
        { lng: 112.995416, lat: 28.196121 },
        { lng: 112.969401, lat: 28.191919 },
        { lng: 112.920389, lat: 28.21382 },
      ],
    };
  },
  methods: {
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
    },
    addPolylinePoint() {
      this.polygonPath.push({ lng: 112.942955, lat: 28.188353 });
    },
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
